<template>
	<view class="group_index">
		<view class="skill_banner">
			<image src="../../static/banner/banner4.jpg"></image>
		</view>
		
		
		<!-- 产品 -->
		<view class="goods_list">
			<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback">
				<view class="goods_item" v-for="(v,k) in list" :key="k" @click="$nav('/pages/goods/info?id='+v.id)">
					<view class="goods_image"><image :src="v.goods_master_image||''" mode="aspectFit" /></view>
					<view class="goods_info">
						<view class="title">
							<text class="goods_name">{{v.goods_name}}</text>
						</view>
						
						<view class="goods_price" style="margin-top: 15rpx;">
							<text class="price">￥{{v.goods_price||'0.00'}}</text>
							<text class="title_before" title="">销量：{{v.goods_sale||0}}</text>
						</view>
						<view class="goods_price">
							<cmd-progress :percent="100" status="active" :stroke-width="4" :showText="v.need+'人成团'" stroke-color="red">
							</cmd-progress>
							<!-- <text class="store_name">青梧商城</text> -->
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		components: {cmdProgress},
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					total:0,
					is_collective:1,
				},
				list:[],
			};
		},
		onLoad() {
		},
		methods:{
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let baseObj = JSON.stringify(this.params);
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				this.params.params = basecode;
				
				this.$http(this.$api.goodsSearch,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
		
	}
</script>

<style lang="scss">
.group_index{
	.skill_banner{
		height: 300rpx;
		image{
			width: 100%;
			height: 300rpx;
			background-color: #ccc;
		}
	}
	.goods_list{
		padding-top: 20rpx;
		.goods_item{
			margin-bottom: 10rpx;
			background: #fff;
			width: 100%;
			min-height:150rpx ;
			border-radius: 10rpx;
			padding: 30rpx;
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			.goods_info{
				float: left;
				position: relative;
				.goods_price{
					.price{color:$uni-color-error;}
					.store_name{color:#fff;font-size: $uni-font-size-sm;colo:#fff;background-color: $uni-color-error;border-radius: 10rpx;padding: 2rpx 20rpx;}
				}
				.title_before{margin-left: 20rpx;max-width: 500rpx;font-size: $uni-font-size-sm;color:#999;height: 45rpx;line-height: 45rpx;overflow: hidden; white-space: nowrap;text-overflow:ellipsis;}
				.title{margin-bottom: 10rpx;&:after{content:'';clear: both;display: block;}.goods_name{max-width: 500rpx;overflow: hidden;display: block;float: left;white-space: nowrap;text-overflow:ellipsis;}}
				.title text:nth-child(2){float: left;font-size: $uni-font-size-sm;background: $uni-color-error;color:#fff;border-radius: 8rpx;padding:0 20rpx;margin-left: 20rpx;margin-top: 6rpx;}
			}
			.goods_image{
				margin-right: 20rpx;
				border-radius: 10rpx;
				width: 150rpx;
				height: 150rpx;
				float: left;
				background: #eee;
				image{width: 150rpx;height: 150rpx;border-radius: 10rpx;}
			}
		}
	}

	
}
</style>
